<template>
	<view class="p-h24 p-v30">
		<view class="p-h24 bg-1 r-10 flex-d-c">
			<view class="p-v40 text-c">
				<text class="text-400-430">您目前正在沟通：前台行政</text>
			</view>
			<image class="cover" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="aspectFill"></image>
			<view class="p-v40 text-c">
				<text class="text-400-530">确认面试</text>
			</view>
		</view>
		<view class="p-h24 bg-1 r-10 m-t30">
			<view class="p-v20 hairline-bottom">
				<Checkbox :modelValue="selected === 1" @update:modelValue="(val: boolean) => onUpdateModelValue(val, 1)">
					<text class="text-400-128">感谢贵公司的面试邀请，但我不得不谢绝。由于个人原因我不得不改变我的职业规划方向，因此不能参加贵公司的面试。希望贵公司能够理解我的决定。</text>
				</Checkbox>
			</view>
			<view class="p-v20">
				<Checkbox :modelValue="selected === 2" @update:modelValue="(val: boolean) => onUpdateModelValue(val, 2)">
					<text class="text-400-128">感谢贵公司的面试邀请，但我不得不谢绝。由于个人原因我不得不改变我的职业规划方向，因此不能参加贵公司的面试。希望贵公司能够理解我的决定。</text>
				</Checkbox>
			</view>
		</view>
	</view>
	<view class="h-168">
		<view class="fixed left-0 bottom-0 right-0 flex-c p-h24 bg-1 h-168">
			<view class="flex-1 flex-c h-76 r-10 bg-2">
				<text class="text-700-228">确认发送</text>
			</view>
			<view class="m-l20 flex-1 flex-c h-76 r-10 bg-7">
				<text class="text-700-328">返回</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import Checkbox from '@/components/checkbox.vue'
	
	const selected = ref(1)
	
	const onUpdateModelValue = (val: boolean, cur: number) => {
		if (!val) return
		
		selected.value = cur
	}
	
	onLoad(() => {
		uni.setNavigationBarTitle({
			title: '连锁餐厅'
		})
	})
</script>

<style lang="scss">
	page {
		background-color: $page-color-4;
	}
</style>

<style lang="scss" scoped>
	.cover {
		width: 384rpx;
		height: 207rpx;
	}
</style>
